<style scoped>
    .tip{line-height: 20px;text-align: center;color:#999;font-size: 12px;}
    .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
    .remark{width:100%;border:0;height: 50px;line-height: 50px;resize : none;}
    .checkbox{padding: 10px 15px;}
    .checkbox i{width:26px;}
    .mark{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}
  </style>
  <template>
    <wrap title="工作信息">
      <div slot="page">
        <div class="fill-box margin-bottom">
          <div class="light-bg">
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="label font-15">工作单位</span>
              <input class="font-15 content" v-model="job.company" type="text" placeholder="请填写单位名称">
            </div>
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="label font-15">单位性质</span>
              <span class="font-15 fill-data" :class="job.companyIndustryName?'content':'placeholder'" @click="showIndustry=!showIndustry">
                {{job.companyIndustryName?job.companyIndustryName:'请选择'}}
                <i class="fa fa-angle-right font-24"></i> 
              </span> 
            </div>
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="label font-15">单位行业</span>
              <span class="font-15 fill-data" :class="job.companyNatureName?'content':'placeholder'" @click="showNature=!showNature">
                {{job.companyNatureName?job.companyNatureName:'请选择'}}
                <i class="fa fa-angle-right font-24"></i> 
              </span> 
            </div>
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="label font-15">所在部门</span>
              <input class="font-15 content" v-model="job.companyDept" type="text" placeholder="请填写部门名称">
            </div>
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="label font-15">职位类别</span>
              <span class="font-15 fill-data" :class="job.companyPositionTypeName?'content':'placeholder'" @click="showPosition=!showPosition">
                {{job.companyPositionTypeName?job.companyPositionTypeName:'请选择'}}
                <i class="fa fa-angle-right font-24"></i> 
              </span> 
            </div>
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="label font-15">工龄</span>
              <span class="font-15 fill-data" :class="job.workYearsName?'content':'placeholder'" @click="showWorkYear=!showWorkYear">
                {{job.workYearsName?job.workYearsName:'请选择'}}
                <i class="fa fa-angle-right font-24" ></i> 
              </span> 
            </div>  
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="label font-15">月收入</span>
              <span class="font-15 fill-data" :class="job.monthIncomeName?'content':'placeholder'" @click="showIncome=!showIncome">
                {{job.monthIncomeName?job.monthIncomeName:'请选择'}}
                <i class="fa fa-angle-right font-24" ></i> 
              </span> 
            </div> 
          </div>
          <div class="fill-group light-bg">
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="label font-15">工作地址</span>
              <span class="font-15 fill-data" :class="job.companyCountyCode?'content':'placeholder'" @click="showAddress=!showAddress">
                {{job.companyCountyCode?job.companyProvinceName+job.companyCityName+job.companyCountyName:'请选择'}} 
                <i class="fa fa-angle-right font-24"></i> 
              </span>
            </div>
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="label font-15">详细地址</span>
              <input class="font-15 content" v-model="job.companyAddress" type="text" placeholder="请填写详细地址">
            </div>
          </div> 
        </div>
        <a href="javascript:;" :class="['next-btn',nextEnable?'red-bg':'grey-9-bg','font-16']" @click="next()">下一步</a>
        <cube-picker :show="showIndustry" :data="industryList" @select="selectIndustry" @cancel="showIndustry = false"></cube-picker>
        <cube-picker :show="showNature" :data="naturesList" @select="selectNature" @cancel="showNature = false"></cube-picker>
        <cube-picker :show="showPosition" :data="positionList" @select="selectPosition" @cancel="showPosition = false"></cube-picker>
        <cube-picker :show="showWorkYear" :data="workYearList" @select="selectWorkYear" @cancel="showWorkYear = false"></cube-picker>
        <cube-picker :show="showIncome" :data="monthIncomeList" @select="selectIncome" @cancel="showIncome = false"></cube-picker>
        <show-city :show="showAddress" @cancel="showAddress = false" @select="selectAddress"></show-city>
      </div>
    </wrap>
  </template>
  <script>
    import wrap from '../../components/wrap.vue'
    import cubePicker from '../../components/cubePicker.vue'
    import showCity from '../../components/showCity.vue'
    
    export default {
      components: {wrap, cubePicker, showCity},
      data () {
        return {
          nextEnable: false,
          showIndustry: false,
          showNature: false,
          showPosition: false,
          showWorkYear: false,
          showIncome: false,
          showAddress: false,
          industryList: [],
          naturesList: [],
          positionList: [],
          workYearList: [],
          monthIncomeList: [],
          job: {
            company: '',
            companyIndustry: 0,
            companyIndustryName: '',
            companyNature: 0,
            companyNatureName: '',
            companyPositionType: 0,
            companyPositionTypeName: '',
            monthIncomeCode: 0,
            monthIncomeName: '',
            workYears: 0,
            workYearsName: '',
            companyDept: '',
            companyProvinceCode: 0,
            companyProvinceName: '',
            companyCityCode: 0,
            companyCityName: '',
            companyCountyCode: 0,
            companyCountyName: '',
            companyAddress: ''
          }
        }
      },
      computed: {
        canSelectContact () {
          /* eslint-disable no-undef */
          return (this.$store.state.inAPP && jiujiJsBridge && jiujiJsBridge.getContacts)
        }
      },
      created () {
        const self = this
        self.getJobInfo()
        self.$watch('job', () => {
          if (self.job.company && parseInt(self.job.companyIndustry) && parseInt(self.job.companyNature) && self.job.companyDept && parseInt(self.job.companyPositionType) && parseInt(self.job.monthIncomeCode) && parseInt(self.job.workYears) && parseInt(self.job.companyCountyCode) && self.job.companyAddress) {
            self.nextEnable = true
          } else {
            self.nextEnable = false
          }
        }, {deep: true})
      },
      methods: {
        selectAddress (data) {
          const self = this
          self.job.companyProvinceCode = data.value[0]
          self.job.companyProvinceName = data.label[0]
          self.job.companyCityCode = data.value[1]
          self.job.companyCityName = data.label[1]
          self.job.companyCountyCode = data.value[2]
          self.job.companyCountyName = data.label[2]
          self.showAddress = false
        },
        selectIndustry (data) {
          const self = this
          self.job.companyIndustryName = data.label[0]
          self.job.companyIndustry = data.value[0]
          self.showIndustry = false
        },
        selectNature (data) {
          const self = this
          self.job.companyNatureName = data.label[0]
          self.job.companyNature = data.value[0]
          self.showNature = false
        },
        selectPosition (data) {
          const self = this
          self.job.companyPositionTypeName = data.label[0]
          self.job.companyPositionType = data.value[0]
          self.showPosition = false
        },
        selectWorkYear (data) {
          const self = this
          self.job.workYearsName = data.label[0]
          self.job.workYears = data.value[0]
          self.showWorkYear = false
        },
        selectIncome (data) {
          const self = this
          self.job.monthIncomeName = data.label[0]
          self.job.monthIncomeCode = data.value[0]
          self.showIncome = false
        },
        getJobInfo () {
          const self = this
          this.$api.fill.getJobInfo().then(res => {
            if (res.code === 0) {
              let data = res.data
              if (data) {
                self.job = data
                self.industryList = data.companyIndustrys
                self.naturesList = data.companyNatures
                self.positionList = data.companyPositionTypes
                self.workYearList = data.workYearss
                self.monthIncomeList = data.monthIncomes
                delete self.job.companyIndustrys
                delete self.job.companyNatures
                delete self.job.companyPositionTypes
                delete self.job.workYearss
                delete self.job.monthIncomes
              }
            } else {
              this.$Toast(res.msg ? res.msg : res.userMsg)
            }
          })
        },
        next () {
          const self = this
          if (!self.nextEnable) {
            return
          }
          self.$api.fill.saveJobInfo(self.job).then(res => {
            if (res.code === 0) {
              // self.$router.push('/detail/addition/')
              self.$router.go(-1)
            } else {
              self.$MessageBox.alert(res.userMsg)
            }
          })
        }
      }
    }
  </script>
  